<template>
    <!-- html结构 -->
    <div class="person">
        <h2>需求：当水温达到60度，或水位达到80cm，给服务器发送请求</h2>
        <h2>当前水温为：{{ temp }}℃</h2>
        <h2>当前水位为：{{ height }}cm</h2>
        <button @click="changetemp">点击水温+10</button>
        <button @click="changeheight">点击水位+10</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import { ref, watch, watchEffect } from 'vue';

let temp = ref(10);
let height = ref(0);
function changetemp() {
    temp.value += 10;
}
function changeheight() {
    height.value += 10;
}
// watch和watchEffect区别
// 1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同
// 2.watch：要明确指出监视的数据
// 3.
// watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）
 

// watch实现多个监听
// const timer= watch([temp,height],(n)=>{
//     // console.log('发送请求',n);
//     // if(n[0]>=60 || n[1]>=80){
//     //     console.log('请求结束');
//     // }
//     // 解构
//     let [newTemp,newHeight]=n
//     if(newTemp>=60 || newHeight>=80){
//         console.log('发送请求');
//         timer()
//     }
// })

// watchEffect实现多个监听，类似react里面的useEffect(),不写依赖项则会监听所有变化
watchEffect(() => {
    // 刚开始就会监听并执行一次
    // console.log('watchEffect监听',[temp,height]);
    if (temp.value >= 60 || height.value >= 80) {
        console.log('发送请求');
    }
})
</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>